<div>
	<link rel="stylesheet" type="text/css" href="pages/use/plats/guideSchedule/guideSchedule.css" />
	<yu-xdialog title="初始化向导" :visible.sync="dialogViewFlag" width="80%" @close="closeAllTab">
		<el-steps :active="activeStepNum" finish-status="success" simple>
			<el-step title="应用系统信息">
				<!-- title="第一步"  description="应用系统信息"  -->
			</el-step>
			<el-step title="默认数据库信息">
				<!--title="第二步" description="默认数据库信息"  -->
			</el-step>
			<el-step title="作业类型选择">
				<!-- title="第三步" description="作业类型选择"  -->
			</el-step>
			<el-step title="执行节点设置">
				<!--  title="第四步" description="执行节点设置"  -->
			</el-step>
		</el-steps>
		<el-tabs type="border-card" v-model="activeTabName">
			<el-tab-pane label="应用系统信息" name="appServer" :disabled="true">
				<el-form-x ref="appServerForm" :group-fields="appFields" label-width="100px">
				</el-form-x>
				<el-form ref="serverTabForm" label-width="100px">
					<el-form-item label="服务器配置:" require="true">
						<yu-toolBar>
							<el-button @click="addServerCfg">新增</el-button>
							<el-button @click="deleteServerCfg">删除</el-button>
						</yu-toolBar>
						<yu-xtable selection-type="checkbox" ref="servertab" :pageable="false" :data="serverCfgDatas" style="width: 100%" max-height="150">
							<yu-xtable-column prop="location" ctype="input" label="服务器地址">
							</yu-xtable-column>
							<yu-xtable-column prop="deployDesc" ctype="input" label="部署说明">
							</yu-xtable-column>
						</yu-xtable>
					</el-form-item>
				</el-form>
				<el-form-x ref="initTabButton" :buttons="firstFormButtons" label-width="120px"></el-form-x>
			</el-tab-pane>
			<el-tab-pane label="默认数据库信息" name="dataBaseSever" :disabled="true">
				<el-tag type="warning" width="100%" small>tips : 如果应用系统包含一个数据库，建议配置为默认数据库；如果应用系统包含多个数据库，可以将其中一个常用的作为默认数据库。</el-tag>
				<el-form-x ref="rdbServerForm" :group-fields="databaseServerAllField" :buttons="middleFormButtons" label-width="100px">
				</el-form-x>
			</el-tab-pane>
			<el-tab-pane label="作业类型选择" name="jobServer" :disabled="true">
				<el-tag type="warning" width="100%" small>请选择您的应用系统需要用到的调度作业类型:</el-tag>
				<el-tag type="warning" width="100%" small class="server-check-type">请选择</el-tag>
				<div style="overflow-y:scroll; overflow-x:hidden; height:360px;">
					<div v-for="jobType in jobTypeList">
						<div class="server-type" @click="jobTypeClick(jobType)">
							<div class="server-type-logo">
								<img :src="jobType.logImg">
							</div>
							<div class="server-type-detail">
								<div style="font-size: 14px;">{{jobType.typeName}}</div>
								<div style="color: #999999;">{{jobType.desc}}</div>
							</div>
							<div class="server-type-check">
								<img :src="jobType.checkImg">
							</div>
						</div>
					</div>
				</div>
				<el-form-x :buttons="middleFormButtons"></el-form-x>
			</el-tab-pane>
			<el-tab-pane label="执行节点设置" name="execServer" :disabled="true">

				<!--<div :visible.sync="tabViewFlag">
					<el-tab-pane label="作业类型选择" name="jobServer1" :disabled="true">
					</el-tab-pane>
				</div>-->
				<yu-tabs v-model="currentTypeTabName">

					<yu-tab-pane v-for="(item, index) in jobTypeList" v-if="item.checked" :key="item.id" :label="item.typeName" :name="item.id">
						<el-tag type="warning" width="100%" small>{{item.tipMsg}}</el-tag>


						<!--<el-form-x :ref="item.formRefName" :group-fields="item.tabfields"   label-width="120px">
					</el-form-x>-->
						<yu-xform :ref="item.formRefName" label-width="268px">
							<yu-xform-group>
								<template v-for="(itemField,index) in item.tabfields[0].fields">
									<yu-xform-item v-if="itemField.ctype!=='select'" :label="itemField.label" :ctype="itemField.ctype" :name="itemField.field"
									 :placeholder="itemField.placeholder" :rules="itemField.rules"></yu-xform-item>
									<yu-xform-item v-else="itemField.ctype==='select'" :label="itemField.label" :ctype="itemField.ctype" :name="itemField.field"
									 :rules="itemField.rules" :options="itemField.options" :multiple="itemField.multiple"></yu-xform-item>
								</template>
							</yu-xform-group>

						</yu-xform>


						<el-form label-width="120px">
							<el-form-item label="服务器配置:" require="true">
								<yu-toolBar>
									<el-button @click="addServerCfg(item)">新增</el-button>
									<el-button @click="deleteServerCfg(item)">删除</el-button>
								</yu-toolBar>
								<yu-xtable selection-type="checkbox" :ref="item.tableRefName" :pageable="false" :data="item.serverCfgDatas" style="width: 100%"
								 max-height="150">
									<yu-xtable-column prop="location" ctype="input" style="width: 40%" label="服务器地址">
									</yu-xtable-column>
									<yu-xtable-column prop="deployDesc" ctype="input" style="width: 50%" label="部署说明">
									</yu-xtable-column>
								</yu-xtable>
							</el-form-item>
						</el-form>
						<el-form-x :buttons="endFormButtons"></el-form-x>
					</yu-tab-pane>
				</yu-tabs>

			</el-tab-pane>


		</el-tabs>
	</yu-xdialog>
</div>